@section('middle_header')
<!-- begin middle header -->
<div id="middle_header">
    <div id="slider" class="sl-slider-wrapper">

        <div class="sl-slider">
        
            <div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="-25" data-slice2-rotation="-25" data-slice1-scale="2" data-slice2-scale="2">
                <div class="sl-slide-inner">
                    <div class="bg-img bg-img-1"></div>
                    <h1>Hello and welcome to<br /> the Bloom site template</h1>
                    <span class="highlight dark_orange">This is ThemeForest premium template, designed with HTML5 and CSS3</span>
                </div>
            </div>
            
            <div class="sl-slide" data-orientation="vertical" data-slice1-rotation="10" data-slice2-rotation="-10" data-slice1-scale="2" data-slice2-scale="2">
                <div class="sl-slide-inner">
                    <div class="bg-img bg-img-2"></div>
                    <h1>Unique template created to<br /> meet versatile purposes</h1>
                    <span class="highlight yellow">Bloom is suitable for Business, Agency, Studio or Creative Portfolios...</span>
                </div>
            </div>
            
            <div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="-25" data-slice2-rotation="-25" data-slice1-scale="2" data-slice2-scale="2">
                <div class="sl-slide-inner">
                    <div class="bg-img bg-img-3"></div>
                    <h1>Fully responsive layout,<br /> fits well on many screens</h1>
                    <span class="highlight green">Bloom can adapt to mobile and wide screen resolutions. Sit back and enjoy.</span>
                </div>
            </div>
            
            <div class="sl-slide" data-orientation="vertical" data-slice1-rotation="-10" data-slice2-rotation="10" data-slice1-scale="2" data-slice2-scale="2">
                <div class="sl-slide-inner">
                    <div class="bg-img bg-img-4"></div>
                    <h1>Show your creativity...<br /> insert own images in slider</h1>
                    <span class="highlight red">Decide for yourself whether to use blurred color or black and white images.</span>
                </div>
            </div>
            
            <div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="-5" data-slice2-rotation="10" data-slice1-scale="2" data-slice2-scale="1">
                <div class="sl-slide-inner">
                    <div class="bg-img bg-img-5"></div>
                    <h1>Clean and modern design<br /> you will love this template</h1>
                    <span class="highlight dark_blue">The Bloom has a lot of elements, predefined pages and many other stuff...</span>
                </div>
            </div>
        </div><!-- /sl-slider -->

        <nav id="nav-dots" class="nav-dots">
            <span class="nav-dot-current"></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </nav>

    </div><!-- /slider-wrapper -->
  
</div><!-- end middle header -->

<!-- begin bottom header -->
<div id="bottom_header">
  <div class="wrap">
    <h3>You will find a lot of cool stuff here, hope you will enjoy exploring.</h3>
  </div>
</div><!-- end bottom header -->
@endsection

@section('content')
<!-- begin Features -->
<div class="container">
    <div class="feature fourth">
        <img src="images/feature1.png" alt="">
        <h4><a href="services.html">Easily adaptable</a></h4>
        <p class="nomargin">Lorem ipsum dolor sit amet, elit. Ma cenas vel purus sapien. Vivamus bi bendum sem ferme.</p>
    </div>
    <div class="feature fourth">
        <img src="images/feature2.png" alt="">
        <h4><a href="services.html">Responsive design</a></h4>
        <p class="nomargin">Lorem ipsum dolor sit amet, elit. Ma cenas vel purus sapien. Vivamus bi bendum sem ferme.</p>
    </div>
    <div class="feature fourth">
        <img src="images/feature3.png" alt="">
        <h4><a href="services.html">Customer support</a></h4>
        <p class="nomargin">Lorem ipsum dolor sit amet, elit. Ma cenas vel purus sapien. Vivamus bi bendum sem ferme.</p>
    </div>
    <div class="feature fourth last">
        <img src="images/feature4.png" alt="">
        <h4><a href="services.html">The highest quality</a></h4>
        <p class="nomargin">Lorem ipsum dolor sit amet, elit. Ma cenas vel purus sapien. Vivamus bi bendum sem ferme.</p>
    </div>
</div><!-- end Features -->

<div class="separator"></div>

<!-- begin Our Works -->
<div class="container">
    <div class="fourth">
        <h4>Our Works</h4>
        <p>Lorem ipsum dolor sit amet, elit. Ma cenas vel purus sapien. Vivamus bi bendum sem fermentum felis varius at tem pus felis egestas. Suspendis se eget orci ligula.</p>
        <a class="read_more" href="portfolio.html">See more works</a>
    </div>
    <div class="item fourth">
        <a class="img_hover" data-rel="prettyPhoto[works]" href="images/portfolio/01.jpg">
            <img src="images/portfolio/01-thumb.jpg" alt="" />
            <span></span>
        </a>
        <div class="item_info">
            <h5><a href="#">Open House Poster</a></h5>
            <span class="article_meta">
                <a href="#">Typography</a>, <a href="#">Illustration</a>
            </span>
        </div>
    </div>
    <div class="item fourth">
        <a class="img_hover" data-rel="prettyPhoto[works]" href="images/portfolio/02.jpg">
            <img src="images/portfolio/02-thumb.jpg" alt="" />
            <span></span>
        </a>
        <div class="item_info">
            <h5><a href="#">Chalk Lettering</a></h5>
            <span class="article_meta">
               <a href="#">Typography</a>, <a href="#">Graphic Design</a>
            </span> 
        </div>
    </div>
    <div class="item fourth last">
        <a class="img_hover" data-rel="prettyPhoto[works]" href="images/portfolio/03.jpg">
            <img src="images/portfolio/03-thumb.jpg" alt="" />
            <span></span>
        </a>
        <div class="item_info">
            <h5><a href="#">Meander</a></h5>
            <span class="article_meta">
                <a href="#">Motion Graphics</a>, <a href="#">Animation</a>
            </span> 
        </div>
    </div>
</div><!-- end Our Works -->

<div class="separator"></div>

<!-- begin From the Blog -->
<div class="container">
    <div class="fourth">
        <h4>From the Blog</h4>
        <p>Lorem ipsum dolor sit amet, elit. Ma cenas vel purus sapien. Vivamus bi bendum sem fermentum. Suspendis se eget orci ligula.</p>
        <a class="read_more" href="blog.html">Read other posts</a>
    </div>
    <div class="fourth">
        <a class="img_hover" data-rel="prettyPhoto[blog]" href="http://vimeo.com/42411918&amp;width=600&amp;width=393">
            <img src="images/portfolio/07-thumb.jpg" alt="" />
            <span></span>
        </a>
        <h5><a href="#">Happy Food by Yum Yum</a></h5>
        <span class="article_meta">
            September 9, 2013.<span class="divider">//</span><a href="#">12 Comments</a>
        </span> 
        <p class="nomargin">Lorem ipsum dolor sit amet, elit. Ma cenas vel purus sapien. Vivamus bi bendum sem fermentum felis varius at tem...</p>
    </div>
    <div class="fourth">
        <a class="img_hover" data-rel="prettyPhoto[blog]" href="images/portfolio/12.jpg">
            <img src="images/portfolio/12-thumb.jpg" alt="" />
            <span></span>
        </a>
        <h5><a href="#">Polar Bear by Adam</a></h5>
        <span class="article_meta">
            August 10, 2013.<span class="divider">//</span><a href="#">5 Comments</a>
        </span> 
        <p class="nomargin">Lorem ipsum dolor sit amet, elit. Ma cenas vel purus sapien. Vivamus bi bendum sem fermentum felis varius at tem...</p>
    </div>
    <div class="fourth last">
        <a class="img_hover" data-rel="prettyPhoto[blog]" href="http://www.youtube.com/watch?v=YE7VzlLtp-4">
            <img src="images/portfolio/09-thumb.jpg" alt="" />
            <span></span>
        </a>
        <h5><a href="#">Big Buck Bunny</a></h5>
        <span class="article_meta">
            January 17, 2013.<span class="divider">//</span><a href="#">77 Comments</a>
        </span> 
        <p class="nomargin">Lorem ipsum dolor sit amet, elit. Ma cenas vel purus sapien. Vivamus bi bendum sem fermentum felis varius at tem...</p>
    </div>
</div><!-- end From the Blog -->

<div class="separator"></div>

<div class="container">
    <div class="half">
        <!-- begin Subscribe form -->
        <h4>Subscribe to our Newsletter</h4>
        <p>Lorem ipsum dolor sit amet, elit. Ma cenas vel purus sapien. Vivamus bi bendus sem fermentum. Suspendis se eget orci ligula. Lorem ipsum dolor sit amet, elit. Ma cenas vel purus sapien...</p>
        <form id="subscribe" action="#">
            <input type="text" name="name" id="name" value="Your name" autocomplete="off" onFocus="if(this.value == 'Your name'){this.value = '';}" onBlur="if(this.value == ''){this.value='Your name';}" />
            <input type="text" name="email" id="email" value="Your email address" autocomplete="off" onFocus="if(this.value == 'Your email address'){this.value = '';}" onBlur="if(this.value == ''){this.value='Your email address';}" />
            <label class="error" for="email" id="email_error"></label>
            <input type="submit" class="btn default" value="Subscribe" />
        </form>
        <!-- end Subscribe form -->
    </div>
    <div class="half last">
        <!-- begin testimonials -->
        <div class="quotes_icon"></div>
        <div class="testimonials">
            <ul class="quotes">
                <li>
                    <div>
                        &quot;A market is never saturated with a good product, but it is very quickly saturated with a bad one.&quot;
                        <cite>- <strong>Henry Ford</strong>, Ford Motor Company</cite>
                    </div></li>
                <li>
                    <div>
                        &quot;Every child is an artist. The challenge is to remain an artist after you grow up.&quot;
                        <cite>- <strong>Pablo Picasso</strong>, Spanish painter</cite>
                    </div></li>
                <li>
                    <div>
                        &quot;You can not do better design with a computer, but you can speed up your work enormously.&quot;
                        <cite>- <strong>Wim Crouwel</strong>, Dutch graphic designer</cite>
                    </div></li>
            </ul>
            
            <ul class="quotes_buttons">
                <li><a data-id="1" class="selected" href="#"></a></li>
                <li><a data-id="2" href="#"></a></li>
                <li><a data-id="3" href="#"></a></li>
            </ul>
        </div><!-- end testimonials -->
    </div>
</div>
@endsection